<template>
  <ActionPanel>
    <div class="grid-box full">
      <div class="keyword flex">
        <ElInput v-model="keyword">
          <template #prepend>
            <ElSelect v-model="iconName" class="w150px">
              <ElOption label="无" value="" />
              <ElOption v-for="(item, name) in icons" :label="item.label" :value="name" :key="name" />
            </ElSelect>
          </template>
        </ElInput>
      </div>
      <div class="content full">
        <el-tabs v-model="activeName" class="full">
          <el-tab-pane v-if="searchList.length > 0" label="搜索" name="_search_">
            <InlineBox :column="20">
              <div v-for="icon in searchList" class="box-item flex-center" :class="{selected: selected === icon}" :key="icon" @click="onClick(icon)">
                <Icon :icon="icon" :size="50" />
              </div>
            </InlineBox>
          </el-tab-pane>
          <el-tab-pane v-for="(item, name) in icons" :label="item.label" :name="name" class="p5px">
            <InlineBox :column="15" gap="10px">
              <div v-for="icon in item.icons" class="box-item flex-center" :class="{selected: selected === icon}" :key="icon" @click="onClick(icon)">
                <Icon :icon="icon" :size="50" />
              </div>
            </InlineBox>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <template #footer>
      <div class="flex gap2">
        <ElInput v-model="selected" class="w200px" />
        <ElButton type="primary" :disabled="!selected" @click="ok">确定</ElButton>
        <ElButton @click="close">关闭</ElButton>
      </div>
    </template>
  </ActionPanel>
</template>
<script setup lang="ts">
  import { ElTabs, ElTabPane, ElInput, ElButton, ElSelect, ElOption } from 'element-plus';
  import { Icon } from '@/components/Icon';
  import { computed, inject, ref, watch } from 'vue';
  import { ActionPanel } from '@/components/ActionPanel';
  import { closePopupKey } from '@/components/Popup';
  import icons from './icons';
import { InlineBox } from '@/components/InlineBox';

  const props = defineProps<{value?: string}>()
  const emits = defineEmits(['choose'])

  function getActiveName() {
    const firstName = Object.keys(icons)[0]
    if(!props.value) return firstName

    for(const name in icons) {
      const item = icons[name]
      for(const icon of item.icons) {
        if(props.value === icon) {
          return name
        }
      }
    }

    return firstName
  }

  const activeName = ref(getActiveName())
  const iconName = ref()
  const keyword = ref('')
  const searchList = computed(() => {
    if(!keyword.value) return []

    const ret = []
    for(const name in icons) {
      const item = icons[name]
      for(const i in item.icons) {
        const icon: string = item.icons[i]
        if(icon.indexOf(keyword.value) >= 0) ret.push(icon)
      }
    }

    return ret
  })

  const close = inject<() => void>(closePopupKey, void 0)
  const selected = ref(props.value)
  function onClick(icon) {
    selected.value = selected.value === icon ? void 0 : icon
  }

  function ok() {
    emits('choose', selected.value)
    close?.()
  }

  watch(() => keyword.value, (val) => {
    if(val) activeName.value = '_search_'
  })

</script>
<style lang="less" scoped>
  .grid-box {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 32px minmax(0, 1fr);
    grid-template-areas: 'keyword' 'content';
    row-gap: 2px
  }
  .keyword {
    grid-area: keyword;
  }
  .content {
    grid-area: content;
  }
  .box-item {
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    padding: 5px;
    cursor: pointer;

    &:hover {
      border-color: rgb(163, 146, 175);
    }
  }
  .selected {
    border: 1px solid blue;
  }
  :deep(.el-tabs__content) {
    height: calc(100% - 79px - 32px);
    border: 1px solid var(--el-border-color);
    border-radius: 4px;
    background-color: beige;
    overflow-y: auto;
  }
</style>